import React from 'react';
import { connect } from 'dva';
import { Layout, Menu } from 'antd';
import { withRouter } from 'react-router-dom';
import router from 'umi/router';
import menuData from 'dic/menu';
import Logo from 'assets/logo.png';
import './index.styl';

const { Item } = Menu;

function Sider(props) {
  const {
    headerTaps: {
      currentTab: { path },
    },
  } = props;
  const handleClick = value => {
    const path = value.keyPath.reverse().join('');
    router.push(path);
  };
  return (
    <Layout.Sider trigger={null} collapsed={false} className="self-sider">
      <div className="logo">
        <img src={Logo} alt="" />
        <div className="logo-text">
          <div style={{display: 'table-cell', verticalAlign: 'middle'}}>
            <p className="translate">COICloud-EMO</p>
            <p className="name">中兵智控</p>
          </div>
          
        </div>
      </div>
      <Menu
        theme="light"
        mode="inline"
        defaultSelectedKeys={[path]}
        selectedKeys={['/' + path.split('/')[1]]}
        onClick={v => handleClick(v)}
      >
        {menuData.map((item, index) => {
          return (
            <Item key={item.path}>
              <span>{item.title}</span>
            </Item>
          );
        })}
      </Menu>
      <div className='foot'>
        <p>©2019 中国兵器装备集团</p>
        <p>自动化研究所</p>
        <p>服务热线：028-83327782</p>
      </div>
    </Layout.Sider>
  );
}

Sider.propTypes = {};

export default connect(({ headerTaps }) => ({
  headerTaps,
}))(withRouter(Sider));
